<template>
  <div class="container">

    <div class="header">
      <div class="header-info">
        <div class="info-item">
          <div class="left">
            <div class="left-title">{{ state.header.left.title }}</div>
            <div class="left-number">{{  state.inSeat }}人</div>
          </div>
          <div class="right">
            <div class="right-picwarp">
              <img :src="LeftWarp" alt="">
              <div class="right-pic">
                <img :src="LeftPic" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="left-title">{{ state.header.top.title }}</div>
            <div class="left-number">{{  state.outSeat }}人</div>
          </div>
          <div class="right">
            <div class="right-picwarp">
              <img :src="RightWarp" alt="">
              <div class="right-pic">
                <img :src="RightPic" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="left-title">{{ state.header.right.title }}</div>
            <div class="left-number">{{  state.allEmployee }}人</div>
          </div>
          <div class="right">
            <div class="right-picwarp">
              <img :src="LeftWarp" alt="">
              <div class="right-pic">
                <img :src="LeftPic" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-title">{{ state.header.title }}</div>
    </div>

    <div class="main">
      <div class="left">

        <div class="warp">
          <div class="head">
            <div class="left-title">{{ state.main.title }}</div>
            <div class="left-time">{{ state.main.time }}</div>
          </div>
          <div class="left-content">
            <div class="seat-left">
              <div class="seat" v-for="(item, index) in 144" :key="index"
                :style="{ backgroundColor: state.leftMap.get(getRow(item) + '_' + getCol(item))?.status !== 1 ? 'rgba(42, 204, 240,0)' : '#141984' }">
                <div class="img-warp" v-if="state.leftMap.get(getRow(item) + '_' + getCol(item))?.status === 1">
                  <!-- <img
                    :src="state.leftMap.get(getRow(item) + '_' + getCol(item))?.status === 1 ? Icon1 : (state.leftMap.get(getRow(item) + '_' + getCol(item))?.status === 2 ? Icon2 : Icon3)"
                    alt=""> -->
                </div>
                <div class="content-warp" v-if="state.leftMap.get(getRow(item) + '_' + getCol(item))?.status === 1">
                  <div class="name">{{ state.leftMap.get(getRow(item) + '_' + getCol(item))?.name }}</div>
<!--                  <div class="org">{{ state.leftMap.get(getRow(item) + '_' + getCol(item))?.orgName }}</div>-->
                </div>
<!--                <div class="leave" v-if="state.leftMap.get(getRow(item) + '_' + getCol(item))?.status === 2">-->
<!--                </div>-->
                <div class="leave" v-if="state.leftMap.get(getRow(item) + '_' + getCol(item))?.status === 2">
                  {{ state.leftMap.get(getRow(item) + '_' + getCol(item))?.name }}
                </div>
                <div class="idle"
                  v-if="state.leftMap.get(getRow(item) + '_' + getCol(item))?.status != 1 && state.leftMap.get(getRow(item) + '_' + getCol(item))?.status != 2">
                </div>
              </div>
            </div>
            <div class="seat-right">
              <div class="seat" v-for="(item, index) in 144" :key="index"
                :style="{ backgroundColor: state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status !== 1 ? 'rgba(42, 204, 240,0)' : '#141984' }">

                <div class="img-warp" v-if="state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status === 1">
                  <!-- <img
                    :src="state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status === 1 ? Icon1 : (state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status === 2 ? Icon2 : Icon3)"
                    alt=""> -->
                </div>
                <div class="content-warp" v-if="state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status === 1">
                  <div class="name">{{ state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.name }}</div>
<!--                  <div class="org">{{ state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.orgName }}</div>-->
                </div>
                <div class="leave" v-if="state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status === 2">
                  {{state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.name}}
                </div>
                <div class="idle"
                  v-if="state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status != 1 && state.rightMap.get(getRow(item) + '_' + getrightCol(item))?.status != 2">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="left-charts">
          <div class="chart1">
            <div class="chart" style="width: 100%;height: 100%" ref="chart1Ref"></div>
          </div>
          <div class="icon">
            <div class="icon-warp">
              <img :src="Icon1" alt="">
              <div class="title">到场</div>
            </div>
            <div class="icon-warp">
              <img :src="Icon2" alt="">
              <div class="title">未到</div>
            </div>
            <div class="icon-warp">
              <img :src="Icon3" alt="">
              <div class="title">应到</div>
            </div>
          </div>
          <div class="chart2">
            <div class="chart" style="width: 100%;height: 100%" ref="chart2Ref"></div>
          </div>
        </div>
      </div>
      <!-- 注释 消息列表  -->
<!--      <div class="main-right">-->
<!--        <div class="right-title">{{ state.main.right.title }}</div>-->

<!--        <div class="right-content" ref="myTable">-->
<!--          <div class="people" v-for="(item) in state.inouts">-->
<!--            <div class="avater">-->
<!--              <img :src="Avater" alt="">-->
<!--            </div>-->
<!--            <div class="info">-->
<!--              <div class="name">{{ item.name }}</div>-->

<!--            </div>-->
<!--            <div class="status">-->
<!--              <img :src="item.inout === 1 ? InMeeting : OutMeeting" alt="">-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onMounted, reactive, ref } from "vue";
import LeftWarp from '@/assets/header/left-warp.png'
import LeftPic from '@/assets/header/left.png'
import RightWarp from '@/assets/header/right-warp.png'
import RightPic from '@/assets/header/right.png'
import Avater from '@/assets/content/avater.png'
import InMeeting from '@/assets/content/inmeeting.png'
import Icon1 from '@/assets/content/icon-1.png'
import Icon2 from '@/assets/content/icon-2.png'
import Icon3 from '@/assets/content/icon-3.png'

import OutMeeting from '@/assets/content/outmeeting.png'
import * as echarts from 'echarts';
import moment from 'moment';
import { useGetInfoApi } from "@/api/demo";

import getUrlParams from "@/utils/getParams.ts"
const chart1Ref = ref()
const chart2Ref = ref()
// const chartsChild2Ref = ref()
const state = reactive({
  header: {
    title: '会议动态',
    left: {
      title: '到场人数',
      number: undefined,
    },
    top: {
      title: '未到人数',
      number: undefined,
    },
    right: {
      title: '应到人数',
      number: undefined,
    }
  },
  main: {
    time: moment().format('YYYY年MM月DD日 HH:mm:ss'),
    title: '参会人数展示',
    charts: {
      title1: '在场人数',
      title2: '离场人数',
      title3: '在场',
      title4: '离开',
      title5: '空闲',
      myCharts: [] as any,
      data1: undefined as any,
      data2: undefined as any,
    },
    right: {
      title: '会议人员实时出入',
    }
  },
  left: [],
  right: [],
  inouts: [],
  idle: 0,
  inSeat: undefined,
  outSeat: undefined,
  allEmployee: undefined,
  leftMap: new Map(),
  rightMap: new Map(),
})

setInterval(() => {
  state.main.time = moment().format('YYYY年MM月DD日 HH:mm:ss')
}, 1000)

const initChart1 = (data) => {
  state.main.charts.data1 = markRaw(echarts.init(chart1Ref.value));
  var value = data;
  const option = {
    backgroundColor: '000',
    title: {
      text: `${value}人`,
      subtext: '到场人数',
      left: 'center',
      top: 'center', //top待调整
      textStyle: {
        color: '#fff',
        fontSize: 54,
        fontFamily: 'DINAlternate-Bold',
      },
      subtextStyle: {
        color: '#ff',
        fontSize: 30,
        fontFamily: 'PingFangSC-Regular',
        top: 'center'
      },
      itemGap: 2 //主副标题间距
    },
    xAxis: {
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      }
      // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    series: [
      // 内圆
      // {
      //   type: 'pie',
      //   radius: ['0', '50%'],
      //   center: ['50%', '50%'],
      //   z: 0,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: '#1147A1'
      //       },
      //       {
      //         offset: 0.5,
      //         color: '#423DB3'
      //       },
      //       {
      //         offset: 1,
      //         color: '#1147A1'
      //       }
      //       ]),
      //       label: {
      //         show: false
      //       },
      //       labelLine: {
      //         show: false
      //       }
      //     },
      //   },
      //   label: {
      //     normal: {
      //       position: "center",

      //     }
      //   },
      //   data: [100],
      // },
      // 进度圈
      {
        type: 'pie',
        radius: ["50%", "52%"],
        data: [{
          value: value,
          itemStyle: {
            normal: {
              borderWidth: 26,
              borderRadius: 0,
              borderColor: {
                colorStops: [{
                  offset: 0,
                  color: '#376CCB'  // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#27DEF7' // 100% 处的颜色
                }]
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
            },
          },
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
        },
        {
          name: 'gap',

          value: 288 - value,
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
            }
          },
        }
        ]
      },
      //刻度尺
      {
        // name: "白色圈刻度",
        type: "gauge",
        radius: "67%",
        startAngle: 225, //刻度起始
        endAngle: -134.8, //刻度结束
        z: 4,
        axisTick: {
          show: true,
          lineStyle: {
            width: 2,
            color: 'rgba(1,244,255, 0.9)'
          }
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: 'rgba(1,244,255, 0.9)'
          } //刻度节点线
        },
        axisLabel: {
          color: 'rgba(255,255,255,0)',
          fontSize: 12,
        }, //刻度节点文字颜色
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        detail: {
          show: false
        },
        data: [{
          value: 0,
          name: ""
        }]
      },
      // 刻度圈
      {
        "type": "pie",
        "radius": ["0%", "73%"],
        "center": ["50%", "50%"],
        "avoidLabelOverlap": false,
        "label": {
          "normal": {
            "show": false,
            "position": "center"
          },
          "emphasis": {
            "show": false,
            "textStyle": {
              "fontWeight": "bold"
            }
          }
        },
        "itemStyle": {
          "normal": {
            "color": {
              "type": "linear",
              "x": 0,
              "y": 0,
              "x2": 0,
              "y2": 1,
              "colorStops": [{
                "offset": 0.05,
                "color": "rgba(32,36,107, 0.2)"
              }, {
                "offset": 0.5,
                "color": "rgba(32,36,107,0.3)"
              }, {
                "offset": 0.95,
                "color": "rgba(32,36,107, 0.2)"
              }]
            }
          }
        },
        "labelLine": {
          "normal": {
            "show": false
          }
        },
        "data": [{
          "value": 3235
        }]
      },

    ]
  };
  state.main.charts.data1.setOption(option);
  state.main.charts.myCharts.push(state.main.charts.data1);
}
const initChart2 = (data) => {
  state.main.charts.data2 = markRaw(echarts.init(chart2Ref.value));
  var value = data;
  const option = {
    backgroundColor: '000',
    title: {
      text: `${value}人`,
      subtext: '应到人数',
      left: 'center',
      top: 'center', //top待调整
      textStyle: {
        color: '#fff',
        fontSize: 54,
        fontFamily: 'DINAlternate-Bold',
      },
      subtextStyle: {
        color: '#ff',
        fontSize: 30,
        fontFamily: 'PingFangSC-Regular',
        top: 'center'
      },
      itemGap: 2 //主副标题间距
    },
    xAxis: {
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      }
      // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    series: [
      // 内圆
      // {
      //   type: 'pie',
      //   radius: ['0', '50%'],
      //   center: ['50%', '50%'],
      //   z: 0,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: '#1147A1'
      //       },
      //       {
      //         offset: 0.5,
      //         color: '#423DB3'
      //       },
      //       {
      //         offset: 1,
      //         color: '#1147A1'
      //       }
      //       ]),
      //       label: {
      //         show: false
      //       },
      //       labelLine: {
      //         show: false
      //       }
      //     },
      //   },
      //   label: {
      //     normal: {
      //       position: "center",

      //     }
      //   },
      //   data: [100],
      // },
      // 进度圈
      {
        type: 'pie',
        radius: ["50%", "52%"],
        data: [{
          value: value,
          itemStyle: {
            normal: {
              borderWidth: 26,
              borderColor: {
                colorStops: [{
                  offset: 0,
                  color: '#376CCB' || '#00cefc' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#27DEF7' || '#367bec' // 100% 处的颜色
                }]
              },
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
            },
          },
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
        },
        {
          name: 'gap',
          value: 288 - value,
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
            }
          },
        }
        ]
      },
      //刻度尺
      {
        // name: "白色圈刻度",
        type: "gauge",
        radius: "67%",
        startAngle: 225, //刻度起始
        endAngle: -134.8, //刻度结束
        z: 4,
        axisTick: {
          show: true,
          lineStyle: {
            width: 2,
            color: 'rgba(1,244,255, 0.9)'
          }
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: 'rgba(1,244,255, 0.9)'
          } //刻度节点线
        },
        axisLabel: {
          color: 'rgba(255,255,255,0)',
          fontSize: 12,
        }, //刻度节点文字颜色
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        detail: {
          show: false
        },
        data: [{
          value: 0,
          name: ""
        }]
      },
      // 刻度圈
      {
        "type": "pie",
        "radius": ["0%", "73%"],
        "center": ["50%", "50%"],
        "avoidLabelOverlap": false,
        "label": {
          "normal": {
            "show": false,
            "position": "center"
          },
          "emphasis": {
            "show": false,
            "textStyle": {
              "fontWeight": "bold"
            }
          }
        },
        "itemStyle": {
          "normal": {
            "color": {
              "type": "linear",
              "x": 0,
              "y": 0,
              "x2": 0,
              "y2": 1,
              "colorStops": [{
                "offset": 0.05,
                "color": "rgba(32,36,107, 0.2)"
              }, {
                "offset": 0.5,
                "color": "rgba(32,36,107,0.3)"
              }, {
                "offset": 0.95,
                "color": "rgba(32,36,107, 0.2)"
              }]
            }
          }
        },
        "labelLine": {
          "normal": {
            "show": false
          }
        },
        "data": [{
          "value": 3235
        }]
      },

    ]
  };
  state.main.charts.data2.setOption(option);
  state.main.charts.myCharts.push(state.main.charts.data2);
}
const getRow = (index: any) => {
  if (~~(index / 12) === 1 && index <= 12) return ~~(index / 12)

  if (~~(index % 12) === 0) {
    return ~~(index / 12)
  }
  return ~~(index / 12) + 1
}

const getCol = (index: any) => {
  if (index % 12 === 0) return 12
  return index % 12
}

const getrightCol = (index: any) => {
  if (index % 24 === 0) return 24
  return (index % 24) + 12
}


// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.main.charts.myCharts.length; i++) {
      setTimeout(() => {
        state.main.charts.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener('resize', initEchartsResizeFun);
};

let timer = null;
let myTable = ref(null);

const clearScroll = () => {
  clearInterval(timer);
  timer = null;
};

const createScroll = () => {
  clearScroll();
  const table = myTable.value;


  timer = setInterval(() => {
    table.scrollTop += 1;//滚动高度+1
    console.log(table.clientHeight, table.scrollTop, table.scrollHeight);
    if (table.clientHeight + table.scrollTop == table.scrollHeight) {
      table.scrollTop = 0;
    }
  }, 100);
};


const getInfo = (code: string) => {
  useGetInfoApi({ code }).then(({ content }: any) => {
    state.header.left.number = content.normalNum
    state.header.right.number = content.errorNum
    state.inouts = content.inouts || 0
    content.position = content.position || []
    state.inSeat = content.position.reduce((acc, curr) => {
      return curr.status === 1 ? acc + 1 : acc;
    }, 0)
    state.outSeat = content.position.reduce((acc, curr) => {
      return curr.status === 2 ? acc + 1 : acc;
    }, 0)
    state.allEmployee = content.position.length
    initChart1(state.inSeat)
    initChart2(state.allEmployee)
    console.log(state.inSeat, state.outSeat);

    state.leftMap.clear()
    state.rightMap.clear()
    state.left = content.position.filter((item) => {
      return item.col <= 12
    })
    state.right = content.position.filter((item) => {
      return item.col > 12
    })
    state.left.forEach((item) => {
      state.leftMap.set(item.row + '_' + item.col, item)
    })
    state.right.forEach((item) => {
      state.rightMap.set(item.row + '_' + item.col, item)
    })
    console.log(state.leftMap);
    console.log(state.rightMap);
  })
}

setInterval(() => {
  const code = getUrlParams(window.location.href)
  getInfo(code)
}, 5000);


onMounted(() => {
  const code = getUrlParams(window.location.href)
  getInfo(code)
  // createScroll()
  initEchartsResize()
})
</script>

<style scoped lang="scss">
.container {
  width: 3000px;
  height: 1800px;
  background-image: url('@/assets/warp.png');
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .header {
    height: 220px;
    width: 100%;
    box-sizing: border-box;
    background-image: url('@/assets/Group 137.png');
    background-size: 100% 100%;
    display: flex;
    position: relative;

    .header-info {
      display: flex;
      align-items: center;
      margin-left: 200px;

      .info-item {
        display: flex;
        margin-right: 40px;

        .left {
          display: flex;
          flex-direction: column;
          color: #fff;
          align-items: center;

          .left-title {
            font-size: 28px;
          }

          .left-number {
            font-size: 32px;
          }
        }

        .right {
          .right-picwarp {
            position: relative;
            margin-left:15px;

            .right-pic {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }

    .header-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 64px;
    }
  }

  .main {
    display: flex;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    box-sizing: border-box;
    flex: 1;

    .left {
      flex: 6;
      display: flex;
      flex-direction: column;

      .warp {
        flex: 4;
        background-color: rgba(19, 12, 33, 0.98);
        border-radius: 16px;
        display: flex;
        flex-direction: column;

        .head {
          display: flex;
          color: #fff;
          font-size: 38px;
          justify-content: center;
          padding-bottom: 20px;
          position: relative;

          .left-time {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translate(0%, -50%);
          }
        }

        .left-content {
          flex: 1;
          display: flex;
          justify-content: space-between;
          padding: 10px 20px 20px 0;

          .seat {
            width: calc(100% / 12.5);
            height: calc(100% / 12.7);
            margin-bottom: 5px;
            color: #fff;
            // background-color: rgb(42, 204, 240);
            border-radius: 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .seat-left {
            width: 49%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: start;
            // background-color: #52f02a;
            border-radius: 4px;
            .content-warp {
              .name {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: white;
                font-size: 37px;
                font-weight: 800;
                background: #141984;
              }
            }
            .content-warp {
              .name {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: white;
                font-size: 37px;
                font-weight: 800;
                background: #141984;
              }
            }
            .img-warp {
              display: flex;
              justify-content: center;
              img {
                width: 50px;
                height: 50px;
              }
            }


            .leave {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              color: yellow;
              font-size: 37px;
              font-weight: 800;
              background: #80211D;

              //background: url('@/assets/content/icon-2.png') no-repeat;
              //background-size: 100% 100%;

            }

            .idle {
              width: 100%;
              height: 100%;
              // background: url('@/assets/content/icon-3.png') no-repeat;
              // background-size: 100% 100%;
              background-color: #80211D;

            }
          }

          .seat-right {
            width: 49%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: start;
            // background-color: #a4f02a;
            border-radius: 4px;
            .content-warp {
              .name {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: white;
                font-size: 37px;
                font-weight: 800;
                background: #141984;
              }
            }

            .img-warp {
              display: flex;
              align-items: center;

              img {
                width: 50px;
                height: 50px;
              }
            }

            .leave {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              color: yellow;
              font-size: 37px;
              font-weight: 800;
              background: #80211D;
            }

            .idle {
              width: 100%;
              height: 100%;
              // background: url('@/assets/content/icon-3.png') no-repeat;
              // background-size: 100% 100%;
              background-color: #80211D;
            }
          }
        }
      }

      .left-charts {
        flex: 1;
        display: flex;
        padding: 0 40px 0 20px;

        .chart1 {
          flex: 2;
        }

        .chart2 {
          flex: 2;
        }

        .icon {
          flex: 3;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background-color: rgba(13, 13, 49, 1);
          color: #fff;
          font-size: 36px;

          img {
            width: 140px;
            height: auto;
          }

          .icon-warp {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }
    }

    .main-right {
      flex: 1;
      color: #fff;
      background-color: rgba(13, 13, 49, 1);
      border-radius: 16px;
      padding-top: 40px;
      display: flex;
      flex-direction: column;

      .right-title {
        font-size: 36px;
      }

      .right-content {
        padding: 10px;
        flex: 1;
        overflow-y: scroll;

        .people {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24px;
          margin-bottom: 8px;

          .avater {
            display: flex;
            align-items: center;

            img {
              width: 44px;
              height: 44px;
            }
          }

          .info {
            flex: 1;
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
          }

          .status {
            display: flex;
            align-items: center;

            img {
              width: 44px;
              height: 44px;
            }
          }
        }
      }
    }
  }
}
.bix {
  color: #141984;
  color: #80211D;
}
</style>